<template>
  <div class="container">
    <tab active-color="#d9332e" :lineWidth="2">
      <tab-item @click.native="tabClick(item.id)" v-for="(item,index) in tabList" :key="index" :selected="index === 0">
        {{item.sport_name}}
      </tab-item>
      <!--<tab-item v-for="n in 8" :key="n" :selected="n===1">已发货{{ n }}</tab-item>-->
    </tab>

    <div class="list-box" v-for="(item) in matchlist">
      <div class="data-time"></div>
      <!--<p class="data-time text-align-center">{{item.title | week}}</p>-->
      <div @click="matchClick(item2)" class="item-list-box" v-for="(item2,i) in item.data">
        <div class="flex-row top-desc">
          <div class="flex-grow-1 top-desc-left">{{item2.big_game_name}} {{item2.phase_name}}</div>
          <div class="flex-grow-1 flex-right top-desc-right">开始时间:{{item2.start_time.substr(5,11)}}</div>
        </div>
        <div class="matchBox flex-grow-0">
          <div class="match_detail flex-row">
            <div class="flex-grow-1 play_box flex-x-center">
              <div>
                <img style="width: 1.08rem;height: 1.08rem" :src="item2.apic" alt="">
                <p class="oneLine">{{item2.play_a_name}}</p>
              </div>
            </div>
            <div class="flex-grow-0">
              <div class="matching flex-x-center flex-y-center">
                {{item2.is_live==1?'直播中':item2.processing==1?'进行中':'竞猜中'}}
              </div>
            </div>
            <div class="flex-grow-1 play_box flex-x-center">
              <div>
                <img style="width: 1.08rem;height: 1.08rem" :src="item2.bpic" alt="">
                <p class="oneLine">{{item2.play_b_name}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="no_data" v-show="show_no_data">---- 暂无相关比赛信息 ----</div>

  </div>
</template>

<script>
  import {Tab, TabItem} from 'vux'
  import {GETGUESSCENTERTOP, GETGUESSCENTERDATALIST, GETCARTCOUNT} from 'src/const/uri'

  document.title = '竞猜中心';
  export default {
    name: "guessCenter",
    components: {Tab, TabItem},
    data() {
      return {
        tabList: [],
        topcurrentindex: 0,
        matchlist: [],
        show_no_data: false,
        uid: ''
      }
    },
    watch: {
      matchlist(val) {
        if (val.length > 0 && val) {
          this.show_no_data = false
        } else {
          this.show_no_data = true
        }
      }
    },
    async mounted() {
      await this.getToplist();
      // getuid
      if (window.android) {
        this.uid = window.android.getUid();
        // window.localStorage.setItem('jcyy_uid',uid);
        await this.getCartCont(this.uid);
        // alert(uid)
      } else {
        window['getUserToken'] = (token, u_id) => {
          this.getCartCont(u_id);
        };
      }
      if (isDebug) {
        this.uid = window.localStorage.getItem('jcyy_uid');
        await this.getCartCont(this.uid);
      }

    },
    methods: {
      getCartCont(uid) {
        this.$ajax.get(GETCARTCOUNT, {
          uid: uid
        }).then(res => {
          if (res.code == 200) {
            if (window.android) {
              window.android.getCartNumber(res.data)
            } else {
              // allData.car_count
              //updateNumber
              window.webkit.messageHandlers.lwdkit.postMessage({
                action: "updateNumber",
                data: {
                  count: res.data
                }
              })
            }
          }
        })
      },
      getToplist() {
        this.$ajax.get(GETGUESSCENTERTOP, {}).then(res => {
          this.tabList = res.data;
          return this.tabList[0].id;
        }).then(id => {
          this.getCenterList(id)
        });
      },
      getCenterList(id) {
        this.$ajax.get(GETGUESSCENTERDATALIST + id).then(res => {
          console.log(res.data);
          this.matchlist = res.data;
        })
      },
      matchClick(item2) {
        // console.log(item2);
        /**
         *  is_live   0没有直播 1 直播中  //没有直播就是竞猜中
         * @ game_id : item2.id
         * @ is_live : item2.is_live
         * @ webUrl : webUrl
         * processing==1； 不跳转
         */
        let toUrl = window.location.origin + `/guess/guessDetails.html?id=${item2.id}`;
        let webUrl = item2.is_live == 1 ? '' : item2.processing == 1 ? '' : toUrl;
        console.log(webUrl);
        if(item2.is_live == 1){
          if (window.android) {
            // window.android.jumpTo(toUrl);
            window.android.homeBannerWebClick(item2.id, item2.is_live, webUrl);
          } else {
            window.webkit.messageHandlers.lwdkit.postMessage({
              action: "pushToGuessDetailOrLive",
              data: {
                game_id: item2.id.toString(),
                is_live: item2.is_live,
                webUrl: webUrl
              }
            })
          }
        }else {
          if (item2.processing !== 1) {
            if (window.android) {
              // window.android.jumpTo(toUrl);
              window.android.homeBannerWebClick(item2.id, item2.is_live, webUrl);
            } else {
              window.webkit.messageHandlers.lwdkit.postMessage({
                action: "pushToGuessDetailOrLive",
                data: {
                  game_id: item2.id.toString(),
                  is_live: item2.is_live,
                  webUrl: webUrl
                }
              })
            }
          }
        }

        // else {
        //   window.location.href = toUrl;
        // }
        // console.log(starttime);
        // starttime = starttime.replace(/-/g,'/');
        // console.log(starttime);
        // console.log(new Date(starttime).getTime());
      },
      tabClick(id) {
        this.getCenterList(id)
      }
    }
  }
</script>

<style>
  body {
    background-color: #f0f4f7;
    padding-bottom: 0.1rem;
  }
</style>
<style scoped lang="less">
  .list-box {
    .data-time {
      /*font-size: 14px;*/
      /*color: #454545;*/
      /*margin-top: 0.2rem;*/
      margin-bottom: 0.1rem;
    }

    .item-list-box {
      background: #fff;
      border-radius: 5px;
      width: 90%;
      margin: 0 auto 0.1rem;
      padding-top: 0.1rem;
      padding-bottom: 0.2rem;
      /*margin-bottom: 0.05rem;*/

      .top-desc {
        font-size: 0.24rem;
        padding: 0 0.24rem;

        .top-desc-left {
          color: #6a6a6a;
        }

        .top-desc-right {
          color: #6a6a6a;
        }
      }

      .matchBox {
        padding: 0 0.1rem;
        font-size: 0.24rem;

        .match_detail {
          margin-top: 0.2rem;

          .matching {
            width: 1.20rem;
            height: 0.54rem;
            font-size: .24rem;
            color: #E10019;
            margin-top: 0.26rem;
            /*border-radius: 3px;*/
            /*border: 1px solid red;*/
            position: relative;
            &:after{
              content: " ";
              position: absolute;
              left: 0;
              top: 0;
              width: 200%;
              height: 1px;
              border: 1px solid red;
              color: red;
              height: 200%;
              transform-origin: left top;
              transform: scale(0.5);
              border-radius: 10px;
            }
          }

          .play_box {
            width: 3rem;
            text-align: center;
          }

          p {
            font-size: 0.26rem;
            margin-top: 0.1rem;
            color: #111111;
          }
        }
      }
    }
  }

</style>